<!DOCTYPE html>
<html>
	<head>
		<title>班组考勤(日汇总)</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
		<script src="js/flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body class="Summary">
		<div id="teamAttendanceDailySummary">
			<div class="title" >
				<div class="titleCont">
					<div class="headPortrait">
		  			<img onload="imgClass(event)" :src="headImg?imgUrl+headImg:'image/icon_group_normal.png'"/>
		  		</div>
		  		<div class="text">
		  			<p v-text="groupName"></p>
		  			<span v-text="projectName"></span>
		  		</div>
		  		
		  		<div class="time">
		  			选择日期：<span onclick="window.location.href = 'setDateDaily';" v-text="attendDateText"></span>
		  		</div>
				</div>
				<!--<div class="teamNum">
					全班{{teamData.groupNumber}}人
					未排班{{teamData.notStatic}}人
				</div>-->
			</div>
			
			<div v-show="notData">
				<div class="circularBg">
					<div class="circular">
						<p>出勤人数／应到人数</p>
						<div v-cloak>{{teamData.actual}}／{{teamData.should}}</div>
						<!--<span>打卡明细</span>-->
					</div>
				</div>
				<ul class="attendanceList">
					<li @click="toDetail('normal')">
						<b>正常打卡</b>
						<span>
							<i v-text="teamData.normal"></i>人
							<img src="image/icon_message_right.png"/>
						</span>
						
					</li>
					<li @click="toDetail('error')">
						<b>异常打卡</b>
						<span>
							<i v-text="teamData.error"></i>人
							<img src="image/icon_message_right.png"/>
						</span>
					</li>
					<li @click="toDetail('out')">
						<b>外勤打卡</b>
						<span>
							<i v-text="teamData.out"></i>人
							<img src="image/icon_message_right.png"/>
						</span>
					</li>
					<li @click="toDetail('missing')">
						<b>缺卡</b>
						<span>
							<i v-text="teamData.notAtten"></i>人
							<img src="image/icon_message_right.png"/>
						</span>
					</li>
					<li @click="toDetail('leave')">
						<b>请假</b>
						<span>
							<i v-text="teamData.leave"></i>人
							<img src="image/icon_message_right.png"/>
						</span>
					</li>
					<!--<li>
						<b>早退</b>
						<span>
							<i>{{teamData.leaveEarly}}</i>人
						</span>
					</li>
					<li>
						<b>迟到</b>
						<span>
							<i>{{teamData.late}}</i>人
						</span>
					</li>-->
				</ul>
			</div>
		</div>
		<script src="js/vue.min.js"></script>
		<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	  <script src="js/axios.min.js"></script>
	  <script src="js/message.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#teamAttendanceDailySummary",
				data:{
					teamData:{},
					attendDate:'',
					attendDateText:'',
					notData:false,
					//班组、项目名称
					projectName:'',
					groupName:'',
					headImg:''
				},
				methods:{					
					query:function(){
						axios.get(url+"/getGroupAttenDayCount",{
							params:{
								projectId:GetQueryString("projectId"),
								attendDate:this.attendDate,
								groupId:GetQueryString("groupId")
                               /* projectId:GetQueryString("projectId")||"0 ",
                                attendDate:this.attendDate,
                                groupId:GetQueryString("groupId")||"10639"*/
							},
							headers:{"token":GetQueryString("token")}
                            //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
						}).then(function(data){
							console.log(data)
							if (data.data.data) {
								this.teamData = data.data.data;
								this.notData = true
							}else{
								this.notData = false
							}
							
						}.bind(this))
					},
					setDate:function(date){
						this.attendDate = date;
						this.attendDateText = replaceDate('y-m-d',date)
						this.query();
					},
					toDetail:function(attenStatus){
						window.location.href='teamAttendanceDailyList.html?attenStatus='+attenStatus+'&projectId='+GetQueryString("projectId")+'&groupId='+GetQueryString("groupId")+'&attendDate='+this.attendDate
					}
				},
				mounted:function(){
					this.$nextTick(function(){   // 文档加载后调用
						this.headImg = GetQueryString('headImg');
						this.projectName = GetQueryString('projectName');
						this.groupName = GetQueryString('groupName');
						var today = new Date();   // 获取当前时间
						var time = today.format('yyyy-MM-dd');  //格式化时间
						this.attendDate = time;
						this.attendDateText = replaceDate("y-m-d");
						this.query();
					});
				}
			});
			
			
		</script>
	</body>
</html>
